<template>
  <view>
    <view class="price_list" :class="{ hover: carInfo.user.level !== 0 }">
      <view @click="toQuoDetail(carInfo)">
        <view class="title">
          <!-- <image class="ico" src="/static/img/ico_logo1.png" mode="widthFix"></image> -->
          <image
            class="ico w-50 h-50 flex-shrink-0"
            :src="getImageUrl(get(carInfo, 'user.avatar'))"
            mode="aspectFill"
          >
          </image>
          <view class="name">
            {{ get(carInfo, "user.username") || "" }}
          </view>
        </view>
        <view class="price_vip">
          <image
            class="ico"
            src="/static/img/ico_v.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="info">
          <view class="ml-36 flex-start">
            <p
              class="fz28 font-bold text-111 mt-5"
              v-if="get(carInfo, 'car.mode') == 2"
            >
              {{$t('汽运')}}
            </p>
            <p
              class="fz28 font-bold text-111 mt-5"
              v-if="get(carInfo, 'car.mode') == 3"
            >
              {{$t('空运')}}
            </p>
            <p
              class="fz28 font-bold text-111 mt-5"
              v-if="get(carInfo, 'car.mode') == 4"
            >
              {{$t('海运')}}
            </p>
            <p
              class="fz28 font-bold text-111 mt-5"
              v-if="get(carInfo, 'car.mode') == 5"
            >
              {{$t('铁路')}}
            </p>
            <view class="carBox center">
              <view class="carCard">
                <span class="ml-11">{{
                  get(carInfo, "car.car_number") || ""
                }}</span>
                <span class="ml-8" v-if="carInfo.car.trailer_number">{{$t('挂')}}</span>
                <span class="ml-8" v-if="carInfo.car.trailer_number">{{
                  carInfo.car.trailer_number
                }}</span>
              </view>
            </view>
          </view>
          <view class="mr-24">
            <p class="fz32 font-bold text-5353">
              {{ carInfo.price_unit || "" }}{{ carInfo.price || "" }}
            </p>
          </view>
        </view>
        <view class="carInfo">
          <view>
            <p class="fz30 font-bold text-111">
              {{ get(carInfo, "car.car_category_name.title") || "" }}
            </p>
            <p class="fz20 text-666 ta-center mt-6">{{$t('车型')}}</p>
          </view>
          <view>
            <p class="fz30 font-bold text-111">
              {{ get(carInfo, "car.car_l") || "" }}*
              {{ get(carInfo, "car.car_w") || "" }}*
              {{ get(carInfo, "car.car_h") || "" }}
            </p>
            <p class="fz20 text-666 ta-center mt-6">{{$t('尺寸')}}(m)</p>
          </view>
          <view>
            <p class="fz30 font-bold text-111">
              {{ get(carInfo, "car.product_volume") || "" }}
            </p>
            <p class="fz20 text-666 ta-center mt-6">{{$t('容量')}}(m³)</p>
          </view>
          <view>
            <p class="fz30 font-bold text-111">
              {{ get(carInfo, "car.product_weight") || "" }}
            </p>
            <p class="fz20 text-666 ta-center mt-6">{{$t('载量')}}(t)</p>
          </view>
        </view>
        <view class="info">
          <view class="ml-36 flex-start">
            <span class="fz28 text-555">{{$t('过程时效')}}:</span>
            <span class="fz28 text-111 font-bold ml-16">{{
              carInfo.validity || ""
            }}</span>
          </view>
          <view class="flex-start mr-24">
            <span class="fz28 text-555">{{$t('有效期至')}}:</span>
            <span class="fz28 text-111 font-bold mr-10 ml-15">{{
              get(carInfo, "quotation_end_at") || ""
            }}</span>
          </view>
        </view>
      </view>
      <view class="btns">
        <view class="btn" @click="toQuoDetail(carInfo)"> {{$t('详情')}} </view>
        <view v-if="!current.includes(index)" class="btn" @click="hide()">
          {{$t('忽略')}}
        </view>
        <view
          v-if="current.includes(index)"
          class="btn yellow"
          @click="cancelCooperate(index)"
        >
          {{$t('已合作')}}
        </view>
        <view v-else class="btn" @click="goCooperate(index)"> {{$t('合作')}} </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ["carInfo", "allInfo", "index"],
  data() {
    return {
      current: [],
      IMAGE_URL: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/",
    };
  },
  mounted() {
    console.log("1212121", this.$props.carInfo);
  },
  methods: {
    getImageUrl(url = "") {
      console.log(url);
      if (url.indexOf("://") > -1) {
        return url;
      } else {
        return this.IMAGE_URL + url;
      }
    },
    cancelCooperate() {
      this.current = [];
      this.$emit("cancelCooperate",  this.$props.carInfo);
    },
    goCooperate(index) {
      this.current.push(index);
      this.$emit("chooseCar", this.$props.carInfo);
    },
    hide() {
      this.$emit("hideItem", this.$props.carInfo);
    },
    toQuoDetail(params) {
      uni.navigateTo({
        url: `/pages/shipmentRecord/quotationInfo?item=${JSON.stringify({
          orderInfo: this.$props.allInfo,
          quoInfo: params,
        })}`,
      });
    },
  },
};
</script>

<style lang="less">
.price_list {
  margin: 20rpx 24rpx 0;
  position: relative;
  border-radius: 26rpx;
  background: #fff;
  box-shadow: 2rpx 4rpx 13.9rpx 0rpx rgba(0, 0, 0, 0.05);

  &.hover {
    border-radius: 30rpx;
    border: 2rpx solid #ffc936;
    background: linear-gradient(
      189deg,
      #ffd572 -12.4%,
      #fff2d9 6.59%,
      #fff 25.33%,
      #fff 56.91%
    );

    .price_vip {
      display: flex;
    }
  }

  .price_vip {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 96rpx;
    height: 40rpx;
    flex-shrink: 0;
    border-radius: 0px 26rpx;
    background: #fb0;
    align-items: center;
    justify-content: center;

    .ico {
      width: 44rpx;
      height: 44rpx;
    }
  }

  .carInfo {
    width: 654rpx;
    height: 143rpx;
    flex-shrink: 0;
    border-radius: 18rpx;
    background: #f7f7f7;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    view {
      // width:'25%';
      text-align: center;
    }
  }

  .info {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;

    .carBox {
      padding: 8rpx;
      border-radius: 6px;
      background: #fcce00;
      margin-left: 20rpx;

      .carCard {
        height: 38rpx;
        flex-shrink: 0;
        border-radius: 6rpx;
        border: 0.5rpx solid rgba(29, 29, 29, 0.47);
        border-radius: 6rpx;
        // background: #FCCE00;
        color: #1d1d1d;
        font-family: "PingFang SC";
        font-size: 24rpx;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 1rpx;
        padding: 0 10rpx;
      }
    }
  }

  .btns {
    border-top: 1rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      width: 100%;
      text-align: center;
      line-height: 90rpx;
      color: #8c8c8c;
      font-size: 26rpx;
      border-left: 1rpx solid #f0f0f0;

      &:first-child {
        border: none;
      }

      &.yellow {
        color: #efb200;
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 90rpx;
    border-bottom: 1rpx solid #f0f0f0;
    margin: 0 24rpx;

    .ico {
      flex-shrink: 0;
      width: 40rpx;
      border-radius: 10rpx;
      margin-right: 15rpx;
    }

    .name {
      color: #1d1d1d;
      font-size: 28rpx;
      font-weight: 600;
      line-height: 28rpx;
    }
  }
}

.contentSty {
  padding-bottom: 150rpx;
}
</style>
